<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-笔记详情</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/wangEditor.min.js"></script>
<style type="text/css">
	.headDiv a
	{
		/*去掉a标签的下划线*/
		text-decoration:none
	}
	/*头部div样式*/
	.headDiv
	{
		background-color:#ececec;
		position:fixed;
		top:0px;
		left:0px;
		right:0px
	}
	/*头部div的小图标样式*/
	.headDiv img
	{
		width:45px;
		height:45px;
		border-radius:25px;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:1%;
		margin-right:1%
	}
	/*笔记详情标题样式*/
	.title
	{
		position:fixed;
		font-size:40px;
		left:45%
	}
	/*编辑器工具栏样式*/
	.w-e-toolbar
	{
		/*修改高度和宽带时，!important是必写的*/
		width:60% !important;
		margin-left:20%
	}
	/*编辑器文本框样式*/
	.w-e-text-container
	{
    	/*修改高度和宽带时，!important是必写的*/
    	width:60% !important;
    	height:650px !important;
    	margin-left:20%;
    	border:#ccc 1px solid !important
	}
	/*修改笔记界面的按钮的样式*/
	input[type="button"]
	{
		width:200px;
		height:50px;
		font-size:25px;
		border-radius:25px;
		margin-left:100px;
		margin-right:100px;
		outline:none
	}
</style>
<script>
	//富文本编辑器
	var E=window.wangEditor;
	var editor=new E("#editor");
	//获得其他页面跳转过来时携带的信息
	var msg="${param.msg}";
	//自执行函数
	$(function()
	{
		//修改地址栏里的地址
		history.pushState(null,null,"${pageContext.request.contextPath}/record/${record.recordId}");
		//根据其他页面跳转过来时携带的信息做出相应的提示
		if(msg=="infoError") alert("操作失败！");
		else if(msg=="updateFailed") alert("修改笔记失败！");
		else if(msg=="success1") alert("修改笔记成功！");
		else if(msg=="success2") alert("修改笔记成功，审核通过后将公开至社区！");
		else if(msg=="deleteFailed") alert("删除笔记失败！");
		//富文本图片上传至服务器
		editor.customConfig.uploadImgServer="${pageContext.request.contextPath}/uploadRecordImage";
		//富文本图片上传的参数名，必要参数，不设置的话后台无法获取到上传的图片
		editor.customConfig.uploadFileName="files";
		//创建富文本编辑器
		editor.create();
		//若该当前用户不是该笔记的主人，则不显示修改笔记的图标
		if("${sessionScope.user.userId}"!="${record.userId}") $(".updateRecordIcon")[0].style.display="none";
		//默认笔记只读
		onlyRead();
	});
	//提交修改笔记
	function updateRecord()
	{
		//获取笔记的标题
		var recordTitle=$("[name='recordTitle']").val();
		//获取笔记的内容
		var recordContent=editor.txt.html();
		//判断笔记标题是否为空
		if(recordTitle=="")
		{
			alert("请输入笔记标题！");
			return;
		}
		//将笔记id放入表单
		$("[name='recordId']").val("${record.recordId}");
		//将笔记内容放入表单
		$("[name='recordContent']").val(recordContent);
		//提交添加笔记
		$(".updateRecordForm").submit();
	}
	//删除此笔记
	function deleteRecord()
	{
		if(!confirm("你确定要删除此笔记吗？")) return;
		location.href="${pageContext.request.contextPath}/deleteRecord?recordId=${record.recordId}";
	}
	//笔记内容初始化
	function recordInit()
	{
		//初始化笔记标题内容
		$("[name='recordTitle']").val("${record.recordTitle}");
		//初始化笔记是否公开至社区
		if("${record.isOpen}"!="false") $("[name='isOpen']").prop("checked",true);
		//初始化笔记内容，这里el表达式要用单引号，防止和笔记内容里面的双引号发生冲突
		editor.txt.html('${record.recordContent}');
	}
	//笔记只读
	function onlyRead(value)
	{
		//如果是点了返回键，提示是否放弃修改
		if(value=="goBack") if(!confirm("你确定要放弃修改吗？")) return false;
		//禁用标题编辑功能
		$("[name='recordTitle']")[0].disabled=true;
		//禁用富文本编辑器的编辑功能
		editor.$textElem.attr("contenteditable",false);
		//不显示富文本编辑器的工具栏
		$(".w-e-toolbar")[0].style.display="none";
		//禁用是否公开的复选框的编辑功能
		$("[name='isOpen']")[0].disabled=true;
		//右上角编辑图标显示
		$(".updateRecordIcon")[0].style.display="";
		//右上角返回图标隐藏
		$(".goBackIcon")[0].style.display="none";
		//下方修改编辑按钮隐藏
		$("input[type='button']")[0].style.display="none";
		$("input[type='button']")[1].style.display="none";
		//笔记发布信息的p标签的内容显示
		$(".recordInfoP")[0].innerHTML="笔记发布者：${recordUserName}，最后修改时间：${record.recordTime}";
		//笔记内容初始化
		recordInit();
		return false;
	}
	//笔记可以编辑
	function openUpdate()
	{
		//打开标题编辑功能
		$("[name='recordTitle']")[0].disabled=false;
		//打开富文本编辑器的编辑功能
		editor.$textElem.attr("contenteditable",true);
		//显示富文本编辑器的工具栏
		$(".w-e-toolbar")[0].style.display="";
		//打开是否公开的复选框的编辑功能
		$("[name='isOpen']")[0].disabled=false;
		//右上角编辑图标隐藏
		$(".updateRecordIcon")[0].style.display="none";
		//右上角返回图标显示
		$(".goBackIcon")[0].style.display="inline";
		//下方修改编辑按钮显示
		$("input[type='button']")[0].style.display="";
		$("input[type='button']")[1].style.display="";
		//笔记发布信息的p标签的内容隐藏
		$(".recordInfoP")[0].innerHTML="";
		return false;
	}
</script>
</head>
<body>
	<!-- 头部div -->
	<div class="headDiv">
		<!-- 首页小图标 -->
		<a href="${pageContext.request.contextPath}/index" title="首页">
			<img src="${pageContext.request.contextPath}/image/home.jpg"/>
		</a>
		<span class="title">笔记详情</span>
		<!-- 修改笔记小图标 -->
		<a href="" title="编辑" class="updateRecordIcon" onclick="return openUpdate()">
			<img src="${pageContext.request.contextPath}/image/updateRecord.jpg" align="right"/>
		</a>
		<!-- 返回小图标 -->
		<a href="" title="返回" class="goBackIcon" onclick="return onlyRead('goBack')" style="display:none">
			<img src="${pageContext.request.contextPath}/image/goBack.jpg" align="right"/>
		</a>
	</div>
	<br/><br/>
	<p align="center" class="recordInfoP"></p>
	<!-- 笔记标题 -->
	<div align="center" class="updateRecordDiv">
		<form action="${pageContext.request.contextPath}/updateRecord" method="post" class="updateRecordForm">
			<input type="text" name="recordTitle" placeholder="笔记标题" style="width:52%;height:50px;font-size:25px"/>
			<input type="checkbox" name="isOpen"/>公开至社区
			<!-- 如果笔记未审核，则显示待审核 -->
			<c:if test="${record.isOpen=='unaudit'}">
				<span>（待审核）</span>
				<script>$("[name='recordTitle']")[0].style.width="47%"</script>
			</c:if>
			<input type="text" name="recordContent" style="display:none"/>
			<input type="text" name="recordId" style="display:none"/>
		</form>
	</div>
	<br/>
	<!-- 富文本编辑器div -->
	<div id="editor" class="updateRecordDiv"></div>
	<br/>
	<!-- 修改笔记的按钮 -->
	<div align="center" class="updateRecordDiv">
		<input type="button" value="删除此笔记" onclick="deleteRecord()"/>
		<input type="button" value="提交修改" onclick="updateRecord()"/>
	</div>
</body>
</html>